<!--
 * @description: 
 * @Author: chuyinlong
 * @Date: 2021-04-30 14:05:47
 * @LastEditors: chuyinlong
 * @LastEditTime: 2021-10-13 14:59:38
-->
<template>
  <!-- 组件、控件、页面菜单页面 -->
  <div class="editor_tab">
    <div class="left_menu">
      <div :class="['tab_item', nowTab === 0 ? 'tab_item_active' : '']" @click="selectTab(0)">
        <svg class="tab--icon" aria-hidden="true">
          <use :xlink:href="nowTab === 0 ? '#iconzujian' : '#iconzujianhui'"></use>
        </svg>
        <div class="tab_item_title">组件</div>
        <div class="decorator"></div>
      </div>
      <div :class="['tab_item', nowTab === 1 ? 'tab_item_active' : '']" @click="selectTab(1)">
        <svg class="tab--icon" aria-hidden="true">
          <use :xlink:href="nowTab === 1 ? '#iconkongjian' : '#iconkongjianhui'"></use>
        </svg>
        <div class="tab_item_title">控件</div>
        <div class="decorator"></div>
      </div>
      <div :class="['tab_item', nowTab === 2 ? 'tab_item_active' : '']" @click="selectTab(2)">
        <svg class="tab--icon" aria-hidden="true">
          <use :xlink:href="nowTab === 2 ? '#iconyemian' : '#iconyemianhui'"></use>
        </svg>
        <div class="tab_item_title">页面</div>
        <div class="decorator"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { IComponent } from "./interfaces/component";
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import setting from "./compontents/index/setting";
@Component({
  components: {
    ...setting,
  },
})
export default class EditorForm extends Vue {
  /** 是否展开 */
  isCollapse = false;

  /** 当前选中tab */
  nowTab = 0;

  @Prop({
    default() {
      return null;
    },
  })
  currentComponent!: IComponent;

  /**
   * 切换左侧tab
   */
  @Emit("change")
  selectTab(num: number) {
    this.nowTab = num;
    this.$store.commit("decoration/SET_ISUSERCENTER", num);
    return this.nowTab;
  }
}
</script>
<style lang="scss">
@import "@/assets/styles/decoration/editorPage";
</style>
